<template>
    <div class="container">
        <header class="header">
            <input type="text"><i class="iconfont icon-fangdajing"></i>
        </header>
        <div>
          <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(item, index) of list" :key="index"><img :src="item.pimg"></mt-swipe-item>
          </mt-swipe>
        </div>
        <div class="title">
          <router-link class="sp" to="/food" tag="span">食谱</router-link>
          <router-link class="sp" to="/baike" tag="span">百科</router-link>
          <router-link class="sp" to="/question" tag="span">问答</router-link>
        </div>
        <div class="content">
          <div class="con" v-for="(item, i) in list" :key="i">
            <div class="left"><img :src="item.pimg" alt="" srcset="" ></div>
            <div class="right">
              <p>{{item.pname}}</p>
              <span>{{item.pid}}人在读</span>
            </div>
          </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    name:"Silkbag",
    data() {
      return {
        list: "",
        bannerlist: [],
      }
    },
   mounted() {
     var _this=this
      axios({
          method:'get',
          url:"http://jx.xuzhixiang.top/ap/api/productlist.php",
          params:{uid:'11475'}
      }).then(function(data){
          _this.list=data.data.data
      })
   }
   
}
</script>

<style scoped="">
	*{
  	font-size: 14px!important;
  }

    .header{
        padding: 3% 16%;
        position: relative;
        background: #56A5E8;
        margin-bottom: 2%
        
    }
    .header input{
        width: 100%;
        border-radius: 10px;
        outline: none;
        border: 0;
        background: white;
        height: 20px;
        text-indent: 10px;
    }
    .header i{
        position: absolute;
        left:322px;
        top:13px;
    }
    .title{
      padding: 5% 20% 1%;
      display:flex
    }
    .title .sp{
      flex: 1;
      text-align: center;
      background: #F0E7D1;
      margin: 0 1% 2% 1%
    }
    .content{
        margin-bottom:44px
    }
    .con{
      width: 96%;
      height: 12%;
      background:#F0E7D1;
      margin-bottom: 4%;
      padding: 6% 2%;
    }
    .left{
      float:left;
      width: 40%;
      height: 100%;
      margin-right: 2%
    }
    .left img{
      width: 100%;
      height: 100%;
    }
    .right{
       width: 56%;
       height: 100%;
       margin-left: 2%;
       float: right
    }
    .right p{
      height: 80%;
    }
    .right span{
      color: #BCBBBB;
      font-size: 12px
    }
    .mint-swipe{
       width: 100%;
      height: 180px;
    }
    .is-active img{
      width: 375px;
      height: 180px;
    }
</style>